<template>
	<view class="guide-page">
		<navbar titleText="欢迎使用"></navbar>
		<image class="bottom-bg" src="https://cdn.spbcn.org/yanxuan/guide/guide-bottom-bg.png" mode="widthFix"></image>
		<view class="skip"><text @click="skipFn">跳过 ></text></view>
		<view class="content">
			<view>
				<view class="tit1">为了为您提供个性化定制界面</view>
				<view class="tit1 mb-100">请回答我们几个问题</view>
				<view class="tit2">{{ steps[activeIndex].title }}</view>
				<view class="sex" v-if="activeIndex === 1">
					<view class="sex-item" @click="chooseFn(1)" :class="steps[activeIndex].value === 1 ? 'sex-item-active' : ''">
						<view class="sex-type">男</view>
						<image class="icon" :src="'https://cdn.spbcn.org/yanxuan/guide/male'+ (steps[activeIndex].value === 1 ? '_a' : '') +'.png'" mode="heightFix"></image>
						<view class="check">
							<image v-if="steps[activeIndex].value === 1" class="check-icon" src="https://cdn.spbcn.org/yanxuan/guide/check.png" mode="heightFix"></image>
						</view>
					</view>
					<view class="sex-item" @click="chooseFn(2)" :class="steps[activeIndex].value === 2 ? 'sex-item-active' : ''">
						<view class="sex-type">女</view>
						<image class="icon" :src="'https://cdn.spbcn.org/yanxuan/guide/female'+ (steps[activeIndex].value === 2 ? '_a' : '') +'.png'" mode="height"></image>
						<view class="check">
							<image v-if="steps[activeIndex].value === 2" class="check-icon" src="https://cdn.spbcn.org/yanxuan/guide/check.png" mode="heightFix"></image>
						</view>
					</view>
				</view>
				<!-- <view v-else-if="activeIndex === 4">
					证书
				</view> -->
				<view v-else>
					<uni-data-picker
						popup-title="请选择"
						:localdata="steps[activeIndex].dataList"
						v-model="classValue"
						@change="onchange"
						@nodeclick="onnodeclick"
						@popupopened="onpopupopened"
						@popupclosed="onpopupclosed"
						@inputclick="inputclick"
					>
						<view class="button" v-if="!steps[activeIndex].value">请选择</view>
						<view class="button" :class="activeIndex === 0 ? 'big-font' : ''" v-else>{{ steps[activeIndex].value }}</view>
					</uni-data-picker>
					
				</view>
				
				<view class="next" @click="next">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from '../../components/navbar.vue'
	export default {
		components: {
			navbar
		},
		data() {
			return {
				activeIndex: 0,
				steps: [
					{ id: 1, type: 'picker', title: '您的年龄是？', value: '', paramValue: '', dataList: [
						{ text: '6', value: 6},
						{ text: '7', value: 7},
						{ text: '8', value: 8},
						{ text: '9', value: 9},
						{ text: '10', value: 10},
						{ text: '11', value: 11},
						{ text: '12', value: 12},
						{ text: '13', value: 13},
						{ text: '14', value: 14},
						{ text: '15', value: 15},
						{ text: '16', value: 16},
						{ text: '17', value: 17},
						{ text: '18', value: 18},
						{ text: '19', value: 19}
					]},
					{ id: 2, type: 'radio', title: '您的性别是？', value: 1, paramValue: 1, dataList: [
						{text: '男', value: 1}, 
						{text: '女', value: 2}
					]},
					{ id: 3, type: 'picker', title: '您当前的学历是？', value: '', paramValue: '', dataList: []}, // education_list
					{ id: 4, type: 'picker', title: '您当前的学校类型是？', value: '', paramValue: '', dataList: []}, // school_type_list
					{ id: 5, type: 'imgCard', title: '请选择您拥有的证书', value: '', paramValue: '', dataList: []}, // certificate_list
				],
				classValue: ''
			};
		},
		created() {
			this.getInfo()
		},
		methods: {
			getInfo() {
				this.$http.getbaseTypeInfo().then(res => {
					if (res.code === 200) {
						this.steps[2].dataList = this.formatDataList(res.data.education_list)
						this.steps[3].dataList = this.formatDataList(res.data.school_type_list)
						this.steps[4].dataList = this.formatDataList(res.data.certificate_list)
						console.log(this.steps)
					}
				})
			},
			formatDataList(list) {
				return list.map(item => {
					item.text = item.title
					item.value = item.id
					return item
				})
			},
			onnodeclick(e) {
				console.log('nodeclick', e);
			},
			onpopupopened(e) {
				console.log('onpopupopened');
			},
			onpopupclosed(e) {
				console.log('onpopupclosed');
			},
			onchange(e) {
				console.log('onchange', e.detail.value);
				this.steps[this.activeIndex].value = e.detail.value[0].text
				this.steps[this.activeIndex].paramValue = e.detail.value[0].value
			},
			inputclick(e){
				console.log('inputclick');
			},
			next() {
				if (!this.steps[this.activeIndex].value && !this.steps[this.activeIndex].paramValue) return
				if (this.activeIndex < 4) {
					this.activeIndex++
				} else {
					console.log(this.steps)
					const params = {
						age: this.steps[0].paramValue,
						sex: this.steps[1].paramValue,
						education_id: this.steps[2].paramValue,
						school_type_id: this.steps[3].paramValue,
						certificate_id: this.steps[4].paramValue
					}
					this.saveUserInfo(params)
				}
			},
			saveUserInfo(params) {
				this.$http.saveUserInfo(params).then(res => {
					if (res.code === 200) {
						uni.switchTab({
							url: "/pages/tabbar/home/index"
						})
					}
				})
			},
			chooseFn (sexValue) {
				this.steps[this.activeIndex].value = sexValue
				this.steps[this.activeIndex].paramValue = sexValue
			},
			skipFn() {
				uni.switchTab({
					url: "/pages/tabbar/home/index"
				})
			}
		}
	}
</script>

<style lang="less">
.guide-page{
	height: 100vh;
	background-image: url(https://cdn.spbcn.org/yanxuan/guide/guide-top-bg.png);
	background-size: 100% auto;
	background-position: top left;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1;
	background-color: #FFF8E1;
}
.bottom-bg{
	position: fixed;
	z-index: 0;
	width: 100%;
	height: auto;
	left: 0;
	right: 0;
	bottom: 0;
}
.skip{
	font-weight: bold;
	font-size: 30rpx;
	color: #000000;
	text-align: right;
	margin-top: 4rpx;
	margin-right: 40rpx;
}
.content{
	margin-top: 180rpx;
	position: relative;
	z-index: 100;
}
.tit1{
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	text-align: center;
}
.mb-100{
	margin-bottom: 100rpx;
}
.tit2{
	font-weight: bold;
	font-size: 50rpx;
	color: #000000;
	text-align: center;
}
.button{
	background-image: url(https://cdn.spbcn.org/yanxuan/guide/guide-btn-bg.png);
	background-size: 100% 100%;
	width: 442rpx;
	height: 106rpx;
	line-height: 106rpx;
	text-align: center;
	margin: 142rpx auto 170rpx;
	color: #fff;
	font-size: 40rpx;
}
.big-font{
	font-size: 80rpx;
	font-weight: bold;
}
.next{
	width: 310rpx;
	height: 80rpx;
	background: linear-gradient(-45deg, #FFD52F 0%, #F99D2E 100%);
	border-radius: 40rpx;
	text-align: center;
	line-height: 80rpx;
	font-weight: bold;
	font-size: 40rpx;
	color: #000000;
	margin: 0 auto;
}
.sex{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 60rpx;
	.sex-item{
		text-align: center;
		margin: 0 80rpx;
		.sex-type{
			color: #B5AE97;
			font-weight: bold;
			font-size: 50rpx;
			margin-bottom: 50rpx;
		}
		.icon{
			height: 98rpx;
			width: 98rpx;
		}
		.check{
			width: 40rpx;
			height: 40rpx;
			background: linear-gradient(-20deg, #D6CFB8, #B5AE97);
			border-radius: 2rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 50rpx auto 70rpx;
			.check-icon{
				width: 18rpx;
				height: 25rpx;
			}
		}
		&.sex-item-active{
			.sex-type{
				color: #F99D2E;
			}
			.check{
				background: linear-gradient(-20deg, #FFD52F, #F99D2E);
			}
		}
	}
}
</style>
